<template>
  <view>
    <view class="category_tab">
      <view class="category_tab_title">
        <view class="title_inner">
          <uni-segmented-control :current="current" :values="items.map(v => v.title)" style-type="text"
            active-color="#d4237a" @clickItem="onClickItem"></uni-segmented-control>
        </view>
        <view class="iconfont iconsearch"></view>
      </view>
      <scroll-view @scrolltolower="handlescrolltolower" scroll-y enable-flex class="category_tab_content">
        <view class="cate_item" v-for="item in vertical" :key="item.id">
          <image :src="item.thumb" mode="widthFix"></image>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import {
    uniSegmentedControl
  } from '@dcloudio/uni-ui'
  export default {
    data() {
      return {
        items: [{
            title: "最新",
            order: "new"
          },
          {
            title: "热门",
            order: "hot"
          },
        ],
        current: 0,
        params: {
          limit: 30,
          skip: 0,
          order: "new"
        },
        id: 0,
        // 页面显示的数据
        vertical: [],
        hasMore: true,
      }
    },
    components: {
      uniSegmentedControl,
    },
    onLoad(options) {
      this.id = options.id
      this.getList()
    },
    methods: {
      onClickItem(e) {
        /*
          1 根据被点击的标题切换标题
          2 切换 order
          3 重新发送请求
        */
        if (this.current !== e.currentIndex) {
          this.current = e.currentIndex
        } else {
          // 点击的是相同的标题
          return
        }
        this.params.order = this.items[e.currentIndex].order
        this.params.skip = 0
        this.vertical = []
        this.getList()
      },
      getList() {
        // http://service.picasso.adesk.com/v1/vertical/category/id/vertical
        this.request({
          url: `http://service.picasso.adesk.com/v1/vertical/category/${this.id}/vertical`,
          data: this.params
        }).then((result) => {
          // console.log(result)
          if (result.res.vertical.length === 0) {
            this.hasMore = false
            uni.showToast({
              title: "没有更多数据了",
              icon: "none"
            })
            return
          }
          this.vertical = [...this.vertical, ...result.res.vertical]
          // console.log(this.vertical)
        })
      },
      // 加载下一页数据
      handlescrolltolower() {
        if (this.hasMore) {
          this.params.skip += this.params.limit
          this.getList()
        } else {
          uni.showToast({
            title: "没有更多数据了",
            icon: "none"
          })
        }
      }
    },
  }
</script>

<style lang="scss">
  .category_tab {
    .category_tab_title {
      position: relative;

      .title_inner {
        width: 60%;
        margin: 0 auto;
      }

      .iconsearch {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 5%;
      }
    }

    .category_tab_content {
      display: flex;
      flex-wrap: wrap;
      height: calc(100vh - 36px);

      .cate_item {
        width: 33.33%;
        border: 5rpx solid #fff;

        image {}
      }
    }
  }
</style>
